<template>
  <div>
    <el-empty v-if="!buildings.length" />
    <div class="list" v-else>
      <div class="item" v-for="(item, index) in buildings" :key="index" :class="{ active: item.fid === selected.fid }" :title="item.fnameL2" @click="onItem(item)">
        <i class="el-icon-office-building icon" />
        <div class="ellipsis">{{ item.fnameL2 }}</div>
      </div>
    </div>
  </div>
</template>
<script>
// 选择楼栋
export default {
  name: 'Buildings',
  props: { buildings: { type: Array, default: () => [] } },
  data() {
    return { selected: {} }
  },
  methods: {
    onItem(item) {
      this.selected = item
      const position = { buildingId: item.fid, shortName: item.fnameL2 }
      this.$emit('ok', { building: item, position })
    }
  }
}
</script>
<style lang="scss" scoped>
.list {
  display: flex;
  flex-wrap: wrap;
}
.item {
  width: 70px;
  height: 90px;
  font-size: 12px;
  text-align: center;
  margin: 10px;
  padding: 10px;
  box-sizing: content-box;
  border-radius: 6px;
  overflow: hidden;
  cursor: pointer;
  &:hover {
    background: #e0eefd;
  }
  &.active {
    background: #74a8f8;
    color: white;
    .icon {
      background: transparent;
      color: white;
    }
  }
}
.icon {
  font-size: 50px;
  color: #74a8f8;
  background: #e0eefd;
  border-radius: 6px;
  padding: 10px;
  margin-bottom: 5px;
}
</style>
